<template>
  <div class="Audit">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>审核管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="全部" name="first">
        <el-card>
          <el-row :gutter="21">
            <el-col :span="4">
              <el-select
                v-model="pojo.tid1"
                filterable
                placeholder="请选择省份"
                @change="changePro"
              >
                <el-option
                  v-for="item in tlist1"
                  :key="item.value"
                  :value="item.id"
                  :label="item.name"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-select
                v-model="pojo.tid2"
                filterable
                placeholder="请选择城市"
                @change="changeCity"
              >
                <el-option
                  v-for="item in tlist2"
                  :key="item.value"
                  :value="item.id"
                  :label="item.name"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-select
                v-model="pojo.tid3"
                filterable
                placeholder="请选择区县"
                @change="changeArea"
              >
                <el-option
                  v-for="item in tlist3"
                  :key="item.value"
                  :value="item.id"
                  :label="item.name"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="5">
              <el-input
                v-model="queryInfo.keyword"
                placeholder="关键字"
              ></el-input>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" @click="findKeyWord">搜索</el-button>
            </el-col>
          </el-row>
        </el-card>
        <HouSingDialog ref="houDialog"></HouSingDialog>
        <el-table :data="AuditList" style="width: 100%">
          <el-table-column
            label="序号"
            prop="id"
            width="50px"
          ></el-table-column>
          <el-table-column
            label="小区名称"
            prop="title"
            width="150px"
          ></el-table-column>
          <el-table-column
            label="标题"
            prop="content"
            width="200px"
          ></el-table-column>
          <el-table-column label="面积" width="80px">
            <template slot-scope="scope">
              <span>{{ scope.row.price }}m2</span>
            </template>
          </el-table-column>
          <el-table-column label="总价" width="80px"
            ><template slot-scope="scope">
              <span>{{ scope.row.allPrice }}万</span>
            </template></el-table-column
          >
          <el-table-column
            label="排序"
            prop="sort"
            width="80px"
          ></el-table-column>
          <el-table-column label="状态" prop="type" width="100px">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="primary">审核</el-button>
              <el-button
                size="mini"
                @click="handleEdit(scope.row)"
                type="primary"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pageIndex"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="queryInfo.pageSize"
          layout="sizes, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="审核通过" name="second"> 审核通过 </el-tab-pane>
      <el-tab-pane label="审核不通过" name="third"> 审核不通过 </el-tab-pane>
    </el-tabs>
    <el-dialog title="房源管理" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="小区名称" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="标题" :label-width="formLabelWidth">
          <el-input v-model="form.content" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="面积" :label-width="formLabelWidth">
          <el-input v-model="form.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="总价" :label-width="formLabelWidth">
          <el-input v-model="form.allPrice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input v-model="form.sort" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="Submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import HouSingDialog from '../../components/HouSingDialog'
import { mapActions, mapState } from 'vuex'
export default {
  data () {
    return {
      queryInfo: {
        keyword: '',
        pageIndex: 1,
        pageSize: 5
      },
      activeName: 'first',
      options: [
        {
          value: '',
          label: ''
        }
      ],
      value: {},
      form: {
        title: '',
        content: '',
        price: '',
        sort: '',
        allPrice: ''
      },
      dialogFormVisible: false,
      formLabelWidth: '120px',
      pojo: {
        tid1: '',
        tid2: '',
        tid3: ''
      },
      tlist1: [],
      tlist2: [],
      tlist3: []
    }
  },
  components: {
    HouSingDialog
  },
  computed: {
    ...mapState('audit', ['AuditList', 'total'])
  },
  methods: {
    changePro () {
      this.pojo.tid2 = ''
      this.pojo.tid3 = ''
      this.$http
        .get('/audit', {
          params: {
            pid: this.pojo.tid1
          }
        })
        .then((res) => {
          this.tlist2 = res.data.data.provinces
        })
      this.getAuditList(this.queryInfo)
    },
    changeCity () {
      this.pojo.tid3 = ''
      this.$http
        .get('/audit', {
          params: {
            pid: this.pojo.tid2
          }
        })
        .then((res) => {
          this.tlist3 = res.data.data.provinces
        })
      this.getAuditList(this.queryInfo)
    },
    changeArea () {
      this.$http
        .get('/audit', {
          params: {
            pid: this.pojo.tid2
          }
        })
        .then((res) => {
          this.tlist3 = res.data.data.provinces
        })
      this.getAuditList(this.queryInfo)
    },
    Submit () {
      if (this.form.id) {
        // 编辑
        this.$http.put('/audit/edit', this.form).then((res) => {
          if (res.data.code === 1) {
            this.$message.success(res.data.message)
          } else {
            this.$message.error(res.data.message)
          }
        })
      } else {
        // 添加
        this.$http.post('/audit/add', this.form).then((res) => {
          if (res.data.code === 1) {
            this.$message.success(res.data.message)
          } else {
            this.$message.error(res.data.message)
          }
        })
      }
      this.dialogFormVisible = false
    },
    ...mapActions('audit', ['getAuditList']),
    handleEdit (row) {
      this.form = row
      this.dialogFormVisible = true
    },
    handleDelete (row) {
      this.$http.delete(`/audit/${row.id}`).then((res) => {
        if (res.data.code !== 1) {
          this.$message.error(res.data.message)
        }
        this.$message.success(res.data.message)
        this.getAuditList(this.queryInfo)
      })
    },
    handleChange (val) {
      console.log(val)
    },
    handleSizeChange (newsize) {
      this.queryInfo.pageSize = newsize
      this.getAuditList(this.queryInfo)
    },
    handleCurrentChange (current) {
      this.queryInfo.pageIndex = current
      this.getAuditList(this.queryInfo)
    },
    findKeyWord () {
      this.getAuditList(this.queryInfo)
    },
    changeSwitch (row) {
      this.$http.put('/audit/edit/type', row).then((res) => {
        if (res.data.code !== 1) {
          this.$message.error(res.data.message)
        } else {
          this.$message.success(res.data.message)
        }
      })
    }
  },
  created () {
    this.getAuditList(this.queryInfo)
  }
}
</script>

<style scoped>
.Audit {
  width: 100%;
  height: 100%;
}
.addBut {
  margin: 5px 0;
}

.el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: 1px solid #999;
}
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  background: #169bd5;
}
.el-tabs__item.is-active {
  color: #fff;
}
</style>
